<template>
  <div>
    <a-tabs defaultActiveKey="0" @change="changeStatus">
      <a-tab-pane v-for="item in tabInfo" :key="item.key">
        <span slot="tab">
          {{ item.filed ? item.tab + "(" + info[item.filed] + ")" : item.tab }}
        </span>
      </a-tab-pane>
    </a-tabs>
    <div style="padding: 0 10px">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="项目名称">
          <a-input v-decorator="['project_name']" placeholder="项目名称">
          </a-input>
        </a-form-item>
        <a-form-item v-if="info.showTimeSearch">
          <a-form-item label="创建时间" style="margin-bottom:0;">
            <a-form-item
              :style="{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginRight: '0'
              }"
            >
              <a-date-picker
                v-decorator="['start_time']"
                :disabledDate="disabledStartDate"
                format="YYYY-MM-DD"
                placeholder="开始时间"
              ></a-date-picker>
            </a-form-item>
            <span
              :style="{
                display: 'inline-block',
                width: '24px',
                textAlign: 'center'
              }"
            >
              -
            </span>
            <a-form-item
              :style="{
                display: 'inline-block',
                width: 'calc(50% - 12px)',
                marginRight: '0'
              }"
            >
              <a-date-picker
                v-decorator="['end_time']"
                :disabledDate="disabledEndDate"
                format="YYYY-MM-DD"
                placeholder="结束时间"
              ></a-date-picker>
            </a-form-item>
          </a-form-item>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            搜索
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    tabInfo: {
      type: Array
    },
    info: {
      type: Object
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  methods: {
    disabledStartDate(startTime) {
      const endTime = this.form.getFieldValue("endTime");
      if (!startTime || !endTime) {
        return false;
      }
      return startTime.valueOf() > endTime.valueOf();
    },
    disabledEndDate(endTime) {
      const startTime = this.form.getFieldValue("startTime");
      if (!endTime || !startTime) {
        return false;
      }
      return startTime.valueOf() >= endTime.valueOf();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = {
            project_name: values.project_name
          };
          if (values.start_time) {
            obj.start_time = parseInt(
              new Date(
                values.start_time.format("YYYY-MM-DD 00:00:00")
              ).getTime() / 1000
            );
          }
          if (values.end_time) {
            obj.end_time = parseInt(
              new Date(
                values.end_time.format("YYYY-MM-DD 23:59:59")
              ).getTime() / 1000
            );
          }
          this.$emit("changeSearch", obj);
        }
      });
    },
    changeStatus(key) {
      this.$emit("changeStatus", key);
    }
  }
};
</script>

<style scoped lang="less"></style>
